<template>
  <div class="toolbox-container">
    <el-tooltip effect="dark" content="图层控制" placement="right">
      <el-popover
        placement="right-start"
        width="400"
        trigger="manual"
        v-model="layerVisible"
      >
        <div class="item-title">
          <div>图层控制</div>
          <div @click="layerVisible = false">
            <i class="el-icon-caret-left"></i>
          </div>
        </div>
        <div>
          <el-checkbox-group
            style="display: flex; flex-direction: column"
            v-model="checkedLayers"
            @change="handleCheckedLayersChange"
          >
            <el-checkbox
              style="margin: 10px"
              v-for="(v, i) in layerOptions"
              :label="i"
              :key="i"
            >
              {{ v }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <el-button
          slot="reference"
          icon="el-icon-copy-document"
          circle
          type="primary"
          plain
          @click="onlyShow(1)"
        ></el-button>
      </el-popover>
    </el-tooltip>
    <br />

    <el-tooltip effect="dark" content="查询" placement="right">
      <el-popover
        placement="right-start"
        width="500"
        trigger="manual"
        v-model="searchVisible"
      >
        <div class="item-title">
          <div>查询</div>
          <div @click="searchVisible = false">
            <i class="el-icon-caret-left"></i>
          </div>
        </div>
        <div style="text-align: right; margin: 0">
          <search-tab ref="tab" :map="baseMap" />
          <search-list :table="features" :map="baseMap" />
          <el-button size="mini" type="text" @click="searchReset">
            重置
          </el-button>
          <el-button type="primary" size="mini" @click="searchConfirm">
            确定
          </el-button>
        </div>
        <el-button
          slot="reference"
          icon="el-icon-search"
          circle
          type="primary"
          plain
          @click="onlyShow(2)"
        ></el-button>
      </el-popover>
    </el-tooltip>
    <br />

    <el-tooltip effect="dark" content="新增" placement="right">
      <el-popover
        placement="right-start"
        width="400"
        trigger="manual"
        v-model="addVisible"
      >
        <div class="item-title">
          <div>新增</div>
          <div @click="addVisible = false">
            <i class="el-icon-caret-left"></i>
          </div>
        </div>
        <add-tab ref="add" :map="baseMap" />
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="text" @click="addReset">
            重置
          </el-button>
          <el-button type="primary" size="mini" @click="addConfirm">
            确定
          </el-button>
        </div>
        <el-button
          :disabled="$store.state.noAction"
          slot="reference"
          icon="el-icon-folder-add"
          circle
          type="primary"
          plain
          @click="onlyShow(3)"
        ></el-button>
      </el-popover>
    </el-tooltip>
  </div>
</template>

<script>
import { search } from "../config/search";
import SearchTab from "./SearchTab.vue";
import AddTab from "./addTab.vue";
import { transact } from "../config/transact";
import SearchList from "./searchList.vue";

export default {
  props: ["map"],

  components: {
    SearchTab,
    AddTab,
    SearchList,
  },

  data() {
    return {
      layerVisible: false,
      searchVisible: false,
      addVisible: false,
      layerOptions: [
        "商业街区（点数据）",
        "基本道路（线数据）",
        "周边建筑（面数据）",
        "搜索图层",
        "克里金插值（假数据）",
      ],
      checkedLayers: [0, 1, 2],
      baseMap: null,
      view: null,
      layerGroup: null,
      features: null,
    };
  },

  methods: {
    // 查询
    searchReset() {
      this.$refs.tab.resetForm();
      this.getAllLayers();
      this.layerGroup[8].getSource().clear();
      this.$refs.tab.canDraw = true;
      this.showSearchLayer(false);
      this.$refs.tab.baseMap.removeInteraction(this.$refs.tab.draw);
      this.features = null;
    },
    async searchConfirm() {
      // 查询参数
      let data = ["FuzzyQuery", "PropertyQuery", "GeoQuery"];
      let tab = this.$refs.tab.activeName;
      let type = data[tab - 1];
      let res = await this.$refs.tab.submitForm();
      if (!res) {
        return;
      }
      let searchParam = this.$refs.tab.param;

      // 图层
      this.getAllLayers();
      this.layerGroup[8].getSource().clear();

      // 查询
      let source = await search(type, null, searchParam);
      this.layerGroup[8].setSource(source);

      this.features = source.getFeatures();

      // 显隐
      this.showSearchLayer(true);
      // this.searchVisible = false;
    },
    // 新增
    addReset() {
      this.$refs.add.canDraw = true;
      this.$refs.add.form.name = "";
      this.$refs.add.form.floor = "";
      this.$refs.add.feature = null;
      this.$refs.add.source.clear();
      this.$store.commit("updateDraw", false);
    },

    async addConfirm() {
      let feature = this.$refs.add.feature;
      if (feature == null) {
        this.$message.warning("请绘制要素形状");
        return;
      }

      let res = this.$refs.add.addParams();
      if (!res) {
        this.$message.warning("请输入对应属性");
        return;
      }

      let type = this.$refs.add.type;

      await transact("insert", type, feature);

      let layerId = type === "xm_shoppoint" ? 5 : type === "xm_lrdl" ? 6 : 7;
      // 成功刷新图层
      this.getAllLayers();
      let data = {
        layer: this.layerGroup[layerId],
        type: type,
      };
      this.$store.dispatch("refreshWFS", data);

      this.$refs.add.canDraw = true;
      this.$store.commit("updateDraw", false);
      this.addVisible = false;
    },

    // 图层显隐
    handleCheckedLayersChange() {
      this.getAllLayers();
      this.showLayer();
    },
    // 显示图层
    showLayer() {
      let arr = [0, 1, 2, 3, 4];
      arr.forEach((v) => {
        let isShow = this.checkedLayers.includes(v);
        this.layerGroup[v + 5].setVisible(isShow);
      });
    },
    // 获取所有图层
    getAllLayers() {
      this.layerGroup = this.baseMap.getAllLayers();
    },
    // 显示搜素图层时其他不显示
    showSearchLayer(show) {
      this.checkedLayers = show ? [3] : [0, 1, 2];
      this.showLayer();
    },
    // 只显示一个弹窗
    onlyShow(type) {
      this.layerVisible = type == 1 ? true : false;
      this.searchVisible = type == 2 ? true : false;
      this.addVisible = type == 3 ? true : false;
    },
  },

  watch: {
    map() {
      this.baseMap = this.map;
      this.view = this.baseMap.getView();
    },
  },
};
</script>

<style scoped>
.toolbox-container {
  display: flex;
  flex-direction: column;
  padding: 20px 20px 20px 10px;
  background-color: #fff;
  border-radius: 0 0 50px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.item-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  font-size: 20px;
  font-weight: bold;
}
</style>